<template>
  <div class="property-setting-container">
    <div class="page-header">
      <h1 class="page-title">属性设置</h1>
      <p class="page-subtitle">管理系统配置和个性化设置</p>
    </div>

    <div class="settings-content">
      <!-- 基础设置卡片 -->
      <a-card class="settings-card" title="基础设置">
        <a-form :model="formState" layout="vertical">
          <a-form-item label="用户名" name="name">
            <a-input v-model:value="formState.name" placeholder="请输入用户名" />
          </a-form-item>
          
          <a-form-item label="QwenPlus API Key" name="qwenPlusApiKey">
            <a-input-password 
              v-model:value="formState.qwenPlusApiKey" 
              placeholder="请输入 QwenPlus API Key" 
            />
            <div class="form-item-help">
              用于访问 QwenPlus AI 服务的密钥，确保安全性
            </div>
          </a-form-item>
          
          <a-form-item>
            <a-button type="primary" @click="saveSettings">
              保存设置
            </a-button>
          </a-form-item>
        </a-form>
      </a-card>

      <!-- 扩展设置区域 -->
      <div class="expandable-section">
        <div class="section-header" @click="toggleAdvancedSettings">
          <h2>高级设置</h2>
          <span :class="['expand-icon', { expanded: showAdvancedSettings }]">
            <CaretUpOutlined v-if="showAdvancedSettings" />
            <CaretDownOutlined v-else />
          </span>
        </div>
        
        <div v-show="showAdvancedSettings" class="section-content">
          <a-card class="settings-card" title="系统配置">
            <p>更多配置项将在后续版本中添加...</p>
          </a-card>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { useBaseStore } from '../../../store/useBaseStore';
import { CaretUpOutlined, CaretDownOutlined } from '@ant-design/icons-vue';
import { message } from 'ant-design-vue';

// 定义表单状态类型
interface FormState {
  name: string;
  qwenPlusApiKey: string;
}

// 初始化 store
const baseStore = useBaseStore();

// 表单数据
const formState = ref<FormState>({
  name: '',
  qwenPlusApiKey: ''
});

// 高级设置展开状态
const showAdvancedSettings = ref(false);

// 切换高级设置显示状态
const toggleAdvancedSettings = () => {
  showAdvancedSettings.value = !showAdvancedSettings.value;
};

// 保存设置
const saveSettings = () => {
  try {
    // 更新 store 数据
    baseStore.data.name = formState.value.name;
    baseStore.data.qwenPlusApiKey = formState.value.qwenPlusApiKey;
    localStorage.setItem('qwenPlusApiKey',formState.value.qwenPlusApiKey);
    message.success('设置已保存');
  } catch (error) {
    message.error('保存设置失败: ' + (error as Error).message);
  }
};

// 组件挂载时加载数据
onMounted(() => {
  // 从 store 初始化表单数据
  formState.value.name = baseStore.data.name;
  formState.value.qwenPlusApiKey = baseStore.data.qwenPlusApiKey;
});
</script>

<style scoped>
.property-setting-container {
  padding: 20px;
  background-color: var(--background-color);
  height: 100%;
  overflow-y: auto;
}

.page-header {
  margin-bottom: 24px;
}

.page-title {
  font-size: 24px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 8px;
}

.page-subtitle {
  font-size: 14px;
  color: var(--text-secondary);
  margin: 0;
}

.settings-content {
  max-width: 800px;
}

.settings-card {
  margin-bottom: 20px;
  border-radius: var(--border-radius);
  box-shadow: var(--shadow);
}

.settings-card :deep(.ant-card-head) {
  border-bottom: 1px solid var(--border-color);
}

.settings-card :deep(.ant-card-head-title) {
  font-size: 16px;
  font-weight: 500;
}

.form-item-help {
  font-size: 12px;
  color: var(--text-placeholder);
  margin-top: 4px;
}

.expandable-section {
  margin-top: 20px;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background-color: var(--surface-color);
  border-radius: var(--border-radius);
  border: 1px solid var(--border-color);
  cursor: pointer;
  transition: all 0.3s;
}

.section-header:hover {
  border-color: var(--primary-color);
}

.section-header h2 {
  font-size: 16px;
  font-weight: 500;
  margin: 0;
  color: var(--text-primary);
}

.expand-icon {
  transition: transform 0.3s;
  font-size: 16px;
  color: var(--text-secondary);
}

.expand-icon.expanded {
  transform: rotate(180deg);
}

.section-content {
  margin-top: 16px;
}
</style>